<template>
  <div class="vpt-layout-pie-wapper">
    <vptPieRader
      v-bind="pieProps"
      :entity="baseData.entityCPU"
      :titleFontSize="titleFontSize"
      :totalFontSize="totalFontSize"
      :width="width"
      :height="height"
      :titleTop="titleTop"
    ></vptPieRader>
    <vptPieRader
      v-bind="pieProps"
      :entity="baseData.entityMemory"
      :titleFontSize="titleFontSize"
      :totalFontSize="totalFontSize"
      :width="width"
      :height="height"
      :titleTop="titleTop"
    ></vptPieRader>
    <vptPieRader
      v-bind="pieProps"
      :entity="baseData.entitySpace"
      :titleFontSize="titleFontSize"
      :totalFontSize="totalFontSize"
      :width="width"
      :height="height"
      :titleTop="titleTop"
    ></vptPieRader>
  </div>
</template>
<script setup>
import { computed } from "vue";
import vptPieRader from "@/components/echarts/vpt-pie-rader/index.vue";

const props = defineProps({
  width: {
    type: String,
    default: "240",
  },
  height: {
    type: String,
    default: "200",
  },
  cpu_usage: { type: String, default: "" },
  cpu_status: { type: String, default: "" },
  memory_usage: { type: String, default: "" },
  mem_status: { type: String, default: "" },
  disk_usage: { type: String, default: "" },
  disk_status: { type: String, default: "" },
  isLandscape: { type: Boolean, default: false },
  titleFontSize: { type: Number, default: 24 },
  totalFontSize: { type: Number, default: 24 },
  titleTop: { type: String, default: "" },
});

const pieProps = computed(() => {
  return props.isLandscape
    ? {
        titleFontSize: 14,
        totalFontSize: 18,
      }
    : {};
});

const baseData = computed(() => {
  return {
    entityCPU: {
      name: "CPU",
      centerFontColor:
        props.cpu_usage >= 80
          ? "##4E5969"
          : props.cpu_usage >= 50
          ? "#fabf01"
          : "#00B675",
      percentageValue: props.cpu_usage,
      percentageDrag: 100 - Number(props.cpu_usage || 0),
      //第一个颜色占用率
      percentageColor: [
        props.cpu_usage >= 80
          ? "#f53f3f"
          : props.cpu_usage >= 50
          ? "#fabf01"
          : "#00B675",

        "#1e3651",
      ],
    },
    entityMemory: {
      name: "内存",
      centerFontColor:
        props.memory_usage >= 80
          ? "#f53f3f"
          : props.memory_usage >= 50
          ? "#fabf01"
          : "#00B675",
      percentageValue: props.memory_usage,
      percentageDrag: 100 - Number(props.memory_usage || 0),
      percentageColor: [
        props.memory_usage >= 80
          ? "#f53f3f"
          : props.memory_usage >= 50
          ? "#fabf01"
          : "#00B675",
        "#1e3651",
      ],
    },
    entitySpace: {
      name: "储存资源",
      centerFontColor:
        props.disk_used_percent >= 80
          ? "#f53f3f"
          : props.disk_used_percent >= 50
          ? "#fabf01"
          : "#00B675",
      percentageValue: props.disk_usage,
      percentageDrag: 100 - Number(props.disk_usage || 0),
      percentageColor: [
        props.disk_used_percent >= 80
          ? "#f53f3f"
          : props.disk_used_percent >= 50
          ? "#fabf01"
          : "#00B675",
        "#1e3651",
      ],
    },
  };
});
</script>
<style lang="less" scoped>
.vpt-layout-pie-wapper {
  display: flex;
  justify-content: space-between;
  margin-top: 0.16rem;
}
</style>